<template>
  <el-dialog :lock-scroll="false" @open="onOpen" @close="onCancel" title="问题编辑" :visible.sync="visible"
             width="750px">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="问题标题" prop="title">
        <el-input v-model="form.title" :maxlength="50" placeholder="名称最多不超过50个字符"/>
      </el-form-item>
      <el-form-item label="问题来源" prop="source">
        <el-select v-model="form.source" placeholder="请选择问题来源">
          <el-option
            v-for="item in source"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题级别" prop="level">
        <el-radio-group v-model="form.level">
          <el-radio v-for="item in level" :label="item" :key="item">{{ item }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关联项目" prop="project_id">
        <ProjectSelect :custom-options="projectOptions" v-model="form.project_id" :disabled="true"/>
      </el-form-item>
      <el-form-item label="关联任务" prop="task_id">
        <TaskSelect v-model="form.task_id" :custom-options="taskOptions" :project_id="form.project_id"
                    :disabled="form.project_id == null"/>
      </el-form-item>
      <el-form-item label="问题负责人" prop="charge_user_id">
        <PrincipalSelect :customOptions="headOptions" ref="principalSelectRef" placeholder="请选择问题负责人"
                         v-model="form.charge_user_id"/>
      </el-form-item>
      <el-form-item label="项目说明" prop="description">
        <el-input v-model.trim="form.description" placeholder="请输入项目描述" :rows="4" type="textarea"/>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="onCancel()">取消</el-button>
      <el-button :loading="loading" type="primary" @click="onSave()">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import ProjectSelect from "@/views/project/task/components/ProjectSelect.vue";
import TaskSelect from "@/views/project/feedback/components/task-select.vue";
import PrincipalSelect from "@/views/project/task/components/PrincipalSelect.vue";

export default {
  props: ["level", "category", "source", "row"],
  components: {
    ProjectSelect,
    TaskSelect,
    PrincipalSelect,
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        title: null,
        source: null,
        level: null,
        project_id: null,
        task_id: null,
        charge_user_id: null,
        description: null
      },
      rules: {
        project_id: [{required: true, message: "项目名称为必需", trigger: "change"}],
        title: [{required: true, message: "问题名称为必需", trigger: "change"}],
        charge_user_id: [{required: true, message: "问题负责人为必需", trigger: "change"}],
        source: [{required: true, message: "问题来源为必需", trigger: "change"}],
        level: [{required: true, message: "问题级别为必需", trigger: "change"}],
      },
      projectOptions: [],
      headOptions: [],
      taskOptions: []
    }
  },
  created() {
  },
  methods: {
    onSave() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.handlePutForm(this.form)
        }
      });
    },
    onCancel() {
      this.visible = false
      this.$refs.form.resetFields()
    },
    onOpen() {
      const {
        title,
        source,
        level,
        project_id,
        project_name,
        task_id,
        task_name,
        charge_user_id,
        description,
        charge_user_name
      } = this.row
      this.taskOptions = [{id: task_id, name: task_name}]
      this.$nextTick(() => {
        this.form = {
          title,
          source,
          level,
          project_id,
          task_id: task_id === 0 ? null : task_id,
          charge_user_id,
          description
        }
        this.headOptions = [{realname: charge_user_name, id: charge_user_id}]
        this.projectOptions = [{id: project_id, name: project_name}]
      })
    },
    async handlePutForm(form) {
      try {
        this.loading = true
        const res = (await this.$http.put(`/suggests/${this.row.id}`, form)).data
        res.success ? this.$message.success(res.msg) : this.$message.error(res.msg)
        this.loading = false
        this.onCancel()
        this.$emit('reload')
      } catch (err) {
        console.log(err)
      }
    },
  }
}
</script>
